<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部导航模块</title>
		<style>
			header{
				width: 1000px;height: 50px;background-color: aqua;margin:  0px auto;position: relative;
				
			}
			ul li{
				list-style-type: none;float: left;
			}
			#first{
				position: absolute;top: -10px;left: 500px;
			}
			.box{
				border: 1px solid gray;height: 200px;width:220px;text-align: center;position: absolute;
				top: 40px;left: 850px;background-color: white;
			}
		</style>
		
	</head>
	<body>
		<header>
			<img src="../img/logo.gif" height="50px" />
			<ul id="first">
				<li>购物车<img src="../img/top_bg.gif" /></li>
				<li>优惠券<img src="../img/top_bg.gif" /></li>
				<li>快速注册<img src="../img/top_bg.gif" /></li>
				<li>各地选课<img src="../img/top_bg.gif" /></li>
				<li>手机报<img src="../img/top_bg.gif" /></li>
				<li>网站导航<img src="../img/top_bg.gif" /></li>
			</ul>
		</header>
		<div class="box">
			<ul>
				<li>托福 雅思 考研 职称英语 初中 日语 </li>
				<li>网络课堂 资讯中心 知识堂 大师讲坛 学习论坛 学词 考研搜校</li>
				<li>M-Zone 手机报 时时英语</li>
			</ul>
		</div>
	</body>
</html>
